<template>
  <div class="imgScale">
    <Card>
      <p slot="title">图片始终居中显示</p>
      <div>
        <Alert>目标效果图</Alert>
        <Row :gutter="16">
          <Col span="4">
            <div class="imgbox">
              <img src="../../../assets/images/demos/testImg/1500x200.png" alt />
            </div>
          </Col>
          <Col span="4">
            <div class="imgbox">
              <img src="../../../assets/images/demos/testImg/200x1500.png" alt />
            </div>
          </Col>
          <Col span="4">
            <div class="imgbox">
              <img src="../../../assets/images/demos/testImg/400x400.png" alt />
            </div>
          </Col>
          <Col span="4">
            <div class="imgbox">
              <img src="../../../assets/images/demos/testImg/800x600.png" alt />
            </div>
          </Col>
          <Col span="4">
            <div class="imgbox">
              <img src="../../../assets/images/demos/testImg/3000x3000.png" alt />
            </div>
          </Col>
          <Col span="4">
            <div class="imgbox">
              <img src="../../../assets/images/demos/testImg/800x800.png" alt />
            </div>
          </Col>
        </Row>
        <Row>
            <Col span="6">
            <div class="imgbox2" ref="imgBox2">
              <img src="../../../assets/images/demos/testImg/800x800.png" alt class="scaleImg"/>
            </div>
            </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  mounted(){
      this.init();
  },
  methods:{
      init(){
          console.log("width:",this.$refs.imgBox2.clientWidth);
          console.log("height:",this.$refs.imgBox2.clientHeight);
      },

  },
  computed:{
      scaleImg:function(){
          
      }
  }
};
</script>

<style lang="less" scoped>
.imgScale {
  .imgbox {
    border: 1px solid #05caf4;
    padding: 20px;
    width: 200px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      max-width: 100%;
      max-height: 100%
    }
  }
  .imgbox2 {
    border: 1px solid #05caf4;
    padding: 20px;
    width: 400px;
    height: 300px;
    box-sizing: content-box;
  }

}
</style>